<!DOCTYPE HTML>
<!--
	Directive by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>

<head>
	<title>2021 年春季 UX 设计课程（UX Design 2021 Spring）</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
	<link rel="stylesheet" href="assets/css/main.css" />
</head>

<body class="is-preload">

	<!-- Header -->
	<div id="header">
		<span class="logo icon fa-paper-plane"></span>
		<h1>2021 年春季 UX 设计课程</h1>
		<p style="text-transform: uppercase; letter-spacing: .5em; margin-left: 0.3em;">
			UX Design 2021 Spring</p>
	</div>

	<!-- Main -->
	<div id="main">

		<header class="major container medium">
			<h1>最新动态</h1>
			<li>
				3月31日更新了
				<strong>作业(HW2)</strong>
				的内容！
				<strong style="color: deeppink; font-size: 1.2em;">4月20日23时59分
				</strong>
				截止提交哦！
			</li>
			<li>
				3月21日更新了
				<strong>作业(HW1)</strong>
				的内容！
				<strong style="color: deeppink; font-size: 1.2em;">4月10日23时59分
				</strong>
				截止提交哦！
			</li>
		</header>

		<div class="box alt container">
			<section class="feature left">
				<a href="#" class="image icon solid cal">
					<div class="cal-content">
						<strong class="cal-day">21</strong>
						<strong class="cal-month">03</strong>
					</div>
					<img src="images/pic01.jpg" alt="" />
				</a>
				<!-- <a href="#" class="image icon solid fa-signal"><img src="images/pic01.jpg" alt="" /></a> -->
				<div class="content">
					<h3>UX 设计学习大纲</h3>
					<p>系统的介绍了 UX 设计学习的大纲、方法以及推荐书单。</p>
				</div>
			</section>
			<section class="feature right">
				<a href="#" class="image icon solid fa-code">
					<div class="cal-content">
						<strong class="cal-day">31</strong>
						<strong class="cal-month">03</strong>
					</div>
					<img src="images/pic02.jpg" alt="" />
				</a>
				<div class="content">
					<h3>Figma 实战：Figma 组件系统的最佳实践</h3>
					<p>Figma Style、Component 和 Library 的最佳实践。</p>
				</div>
			</section>
			<section class="feature left">
				<a href="#" class="image icon solid fa-mobile-alt"><img src="images/pic03.jpg" alt="" /></a>
				<div class="content">
					<h3>The Third Thing</h3>
					<p>Vitae natoque dictum etiam semper magnis enim feugiat
						amet curabitur tempor orci penatibus.
						Tellus erat mauris ipsum fermentum etiam vivamus eget.
						Nunc nibh morbi quis fusce lacus.</p>
				</div>
			</section>
		</div>

		<!-- <div class="box container">
			<header>
				<h2>A lot of generic stuff</h2>
			</header>
			<section>
				<header>
					<h3>Paragraph</h3>
					<p>This is the subtitle for this particular heading</p>
				</header>
				<p>Phasellus nisl nisl, varius id <sup>porttitor sed
						pellentesque</sup> ac orci. Pellentesque
					habitant <strong>strong</strong> tristique <b>bold</b> et
					netus <i>italic</i> malesuada
					<em>emphasized</em> ac turpis egestas. Morbi
					leo suscipit ut. Praesent <sub>id turpis vitae</sub> turpis
					pretium ultricies. Vestibulum sit
					amet risus elit.
				</p>
			</section>
			<section>
				<header>
					<h3>Blockquote</h3>
				</header>
				<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis
					tincidunt felis sagittis eget.
					tempus euismod. Vestibulum ante ipsum primis in faucibus.
				</blockquote>
			</section>
			<section>
				<header>
					<h3>Divider</h3>
				</header>
				<p>Donec consectetur vestibulum dolor et pulvinar. Etiam vel
					felis enim, at viverra
					ligula. Ut porttitor sagittis lorem, quis eleifend nisi
					ornare vel. Praesent nec orci
					facilisis leo magna. Cras sit amet urna eros, id egestas
					urna. Quisque aliquam
					tempus euismod. Vestibulum ante ipsum primis in faucibus
					orci luctus et ultrices
					posuere cubilia.</p>
				<hr />
				<p>Donec consectetur vestibulum dolor et pulvinar. Etiam vel
					felis enim, at viverra
					ligula. Ut porttitor sagittis lorem, quis eleifend nisi
					ornare vel. Praesent nec orci
					facilisis leo magna. Cras sit amet urna eros, id egestas
					urna. Quisque aliquam
					tempus euismod. Vestibulum ante ipsum primis in faucibus
					orci luctus et ultrices
					posuere cubilia.</p>
			</section>
			<section>
				<header>
					<h3>Unordered List</h3>
				</header>
				<ul class="default">
					<li>Donec consectetur vestibulum dolor et pulvinar. Etiam
						vel felis enim, at viverra ligula. Ut
						porttitor sagittis lorem, quis eleifend nisi ornare vel.
					</li>
					<li>Donec consectetur vestibulum dolor et pulvinar. Etiam
						vel felis enim, at viverra ligula. Ut
						porttitor sagittis lorem, quis eleifend nisi ornare vel.
					</li>
					<li>Donec consectetur vestibulum dolor et pulvinar. Etiam
						vel felis enim, at viverra ligula. Ut
						porttitor sagittis lorem, quis eleifend nisi ornare vel.
					</li>
					<li>Donec consectetur vestibulum dolor et pulvinar. Etiam
						vel felis enim, at viverra ligula. Ut
						porttitor sagittis lorem, quis eleifend nisi ornare vel.
					</li>
				</ul>
			</section>
			<section>
				<header>
					<h3>Ordered List</h3>
				</header>
				<ol class="default">
					<li>Donec consectetur vestibulum dolor et pulvinar. Etiam
						vel felis enim, at viverra ligula. Ut
						porttitor sagittis lorem, quis eleifend nisi ornare vel.
					</li>
					<li>Donec consectetur vestibulum dolor et pulvinar. Etiam
						vel felis enim, at viverra ligula. Ut
						porttitor sagittis lorem, quis eleifend nisi ornare vel.
					</li>
					<li>Donec consectetur vestibulum dolor et pulvinar. Etiam
						vel felis enim, at viverra ligula. Ut
						porttitor sagittis lorem, quis eleifend nisi ornare vel.
					</li>
					<li>Donec consectetur vestibulum dolor et pulvinar. Etiam
						vel felis enim, at viverra ligula. Ut
						porttitor sagittis lorem, quis eleifend nisi ornare vel.
					</li>
				</ol>
			</section> -->
			<section>
				<header>
					<h3>课程作业</h3>
				</header>
				<div class="table-wrapper">
					<table class="default">
						<thead>
							<tr>
								<th>编号</th>
								<th>更新日期</th>
								<th>课程</th>
								<th>作业</th>
								<th>截止日期</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>HW1</td>
								<td>3月21日</td>
								<td>UX 设计学习大纲</td>
								<td>
									<li>题目：运用所学设计流程，实现一款番茄钟（倒计时）小程序</li>
									<li>输出：1. 可以是手绘稿、原型图或高保真图；2. 以文档形式输出完成作业的设计过程。</li>
									<li>福利：若设计优秀，则可收录在工作室系列产品中</li>
								</td>
								<td style="color: deeppink">4月10日23时59分</td>
							</tr>
							<tr>
								<td>HW2</td>
								<td>3月31日</td>
								<td>Figma 实战：Figma 组件系统的最佳实践</td>
								<td>
									<li>题目：Neutrinor Design 组件库：独⽴完成Radio 和 Checkbox组件的设计</li>
									<li>输出：1. Figma 组件。</li>
									<li>提示：可参考 Ant Design, Material UI 等优秀组件库</li>
								</td>
								<td style="color: deeppink">4月20日23时59分</td>
							</tr>
						</tbody>
					</table>
				</div>
			</section>
			<!-- <section>
				<header>
					<h3>Form</h3>
				</header>
				<form method="post" action="#">
					<div class="row">
						<div class="col-6 col-12-mobilep">
							<label for="name">Name</label>
							<input class="text" type="text" name="name" id="name" value="" placeholder="John Doe" />
						</div>
						<div class="col-6 col-12-mobilep">
							<label for="email">Email</label>
							<input class="text" type="text" name="email" id="email" value=""
								placeholder="johndoe@domain.tld" />
						</div>
						<div class="col-12">
							<label for="subject">Subject</label>
							<input class="text" type="text" name="subject" id="subject" value=""
								placeholder="Enter your subject" />
						</div>
						<div class="col-12">
							<label for="subject">Message</label>
							<textarea name="message" id="message" placeholder="Enter your message" rows="6"></textarea>
						</div>
						<div class="col-12">
							<ul class="actions special">
								<li><input type="submit" value="Send" /></li>
								<li><input type="reset" value="Reset" class="alt" /></li>
							</ul>
						</div>
					</div>
				</form>
			</section> -->
		</div>

		<footer class="major container medium">
			<h3>中微子工作室</h3>
			<p>一个专注于设计体验和 Web 应用开发的有爱的工作室。</p>
			<ul class="actions special">
				<li><a href="https://www.yuque.com/neutrinor" class="button">加入我们</a></li>
			</ul>
		</footer>

	</div>

	<!-- Footer -->
	<div id="footer">
		<div class="container medium">

			<!-- <header class="major last">
				<h2>Questions or comments?</h2>
			</header>

			<p>Vitae natoque dictum etiam semper magnis enim feugiat amet
				curabitur tempor
				orci penatibus. Tellus erat mauris ipsum fermentum etiam
				vivamus.</p>

			<form method="post" action="#">
				<div class="row">
					<div class="col-6 col-12-mobilep">
						<input type="text" name="name" placeholder="Name" />
					</div>
					<div class="col-6 col-12-mobilep">
						<input type="email" name="email" placeholder="Email" />
					</div>
					<div class="col-12">
						<textarea name="message" placeholder="Message" rows="6"></textarea>
					</div>
					<div class="col-12">
						<ul class="actions special">
							<li><input type="submit" value="Send Message" />
							</li>
						</ul>
					</div>
				</div>
			</form> -->

			<ul class="icons">
				<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
				<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
				<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
				<li><a href="#" class="icon brands fa-github"><span class="label">Github</span></a></li>
				<li><a href="#" class="icon brands fa-dribbble"><span class="label">Dribbble</span></a></li>
			</ul>

			<ul class="copyright">
				<li>&copy; Untitled. All rights reserved.</li>
				<li><a href="https://www.yuque.com/neutrinor/topics">联系我们</a></li>
				<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
			</ul>

		</div>
	</div>

	<!-- Scripts -->
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/browser.min.js"></script>
	<script src="assets/js/breakpoints.min.js"></script>
	<script src="assets/js/util.js"></script>
	<script src="assets/js/main.js"></script>

</body>

</html>